import { useState, useCallback } from 'react';

import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import Grid from '@mui/material/Grid';
import Chip from '@mui/material/Chip';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import OutlinedInput from '@mui/material/OutlinedInput';

import { DashboardContent } from 'src/layouts/dashboard';
import { Iconify } from 'src/components/iconify';

// ----------------------------------------------------------------------

/**
 * 候補者検索ビュー：検索フォームを実装
 */
export function CandidateView() {
    // 基本検索条件
    const [searchKeyword, setSearchKeyword] = useState('');
    const [ageFrom, setAgeFrom] = useState('');
    const [ageTo, setAgeTo] = useState('');
    const [gender, setGender] = useState('');
    const [nearestStation, setNearestStation] = useState('');

    // 学歴・語学
    const [education, setEducation] = useState('');
    const [major, setMajor] = useState('');
    const [languages, setLanguages] = useState<string[]>([]);

    // 職務経歴
    const [industry, setIndustry] = useState('');
    const [jobType, setJobType] = useState('');
    const [yearsOfExperience, setYearsOfExperience] = useState('');
    const [currentSalary, setCurrentSalary] = useState('');
    const [desiredSalary, setDesiredSalary] = useState('');

    // 希望条件
    const [desiredJobType, setDesiredJobType] = useState<string[]>([]);
    const [desiredIndustry, setDesiredIndustry] = useState<string[]>([]);
    const [desiredLocation, setDesiredLocation] = useState<string[]>([]);
    const [workStyle, setWorkStyle] = useState<string[]>([]);

    // スキル・資格
    const [skills, setSkills] = useState<string[]>([]);
    const [certifications, setCertifications] = useState<string[]>([]);

    // ステータス
    const [registrationDateFrom, setRegistrationDateFrom] = useState('');
    const [registrationDateTo, setRegistrationDateTo] = useState('');
    const [jobChangeStatus, setJobChangeStatus] = useState('');

    const handleSearch = useCallback(() => {
        console.log('検索実行');
        // TODO: 検索処理を実装
    }, []);

    const handleReset = useCallback(() => {
        setSearchKeyword('');
        setAgeFrom('');
        setAgeTo('');
        setGender('');
        setNearestStation('');
        setEducation('');
        setMajor('');
        setLanguages([]);
        setIndustry('');
        setJobType('');
        setYearsOfExperience('');
        setCurrentSalary('');
        setDesiredSalary('');
        setDesiredJobType([]);
        setDesiredIndustry([]);
        setDesiredLocation([]);
        setWorkStyle([]);
        setSkills([]);
        setCertifications([]);
        setRegistrationDateFrom('');
        setRegistrationDateTo('');
        setJobChangeStatus('');
    }, []);

    return (
        <DashboardContent maxWidth="xl">
            {/* ヘッダー */}
            <Box>
                <Box display="flex" alignItems="center" gap={2} sx={{ mb: 2 }}>
                    <Typography variant="h4" sx={{ fontWeight: 700 }}>
                        候補者検索
                    </Typography>
                </Box>
                <Typography variant="body2" sx={{ color: 'text.secondary', mb: 3 }}>
                    候補者情報を詳細な条件で検索できます。複数の条件を組み合わせて、最適な人材を見つけましょう。
                </Typography>
            </Box>

            {/* キーワード検索セクション */}
            <Box
                sx={{
                    bgcolor: 'background.paper',
                    border: '1px solid',
                    borderColor: 'divider',
                    borderRadius: 0.5,
                    overflow: 'hidden',
                    mb: 3,
                }}
            >
                <Box sx={{ bgcolor: 'rgba(5,67,165,0.1)', px: 1.5, py: 0.75, borderBottom: '1px solid', borderColor: 'divider' }}>
                    <Typography variant="subtitle2" sx={{ fontWeight: 600, color: 'text.primary', fontSize: '0.875rem' }}>
                        キーワード検索
                    </Typography>
                </Box>
                <Box sx={{ p: 2 }}>
                    <TextField
                        fullWidth
                        size="small"
                        placeholder="キーワードを入力してください（例：React、Python、営業経験）"
                        value={searchKeyword}
                        onChange={(e) => setSearchKeyword(e.target.value)}
                        sx={{
                            '& .MuiOutlinedInput-root': {
                                bgcolor: 'background.paper',
                                fontSize: '0.875rem',
                            },
                        }}
                    />
                </Box>
            </Box>

            {/* 基本情報セクション */}
            <Box
                sx={{
                    bgcolor: 'background.paper',
                    border: '1px solid',
                    borderColor: 'divider',
                    borderRadius: 0.5,
                    overflow: 'hidden',
                    mb: 3,
                }}
            >
                <Box sx={{ bgcolor: 'rgba(5,67,165,0.1)', px: 1.5, py: 0.75, borderBottom: '1px solid', borderColor: 'divider' }}>
                    <Typography variant="subtitle2" sx={{ fontWeight: 600, color: 'text.primary', fontSize: '0.875rem' }}>
                        基本情報
                    </Typography>
                </Box>
                <Box sx={{ p: 2 }}>
                    <Grid container spacing={2}>
                        <Grid size={{ xs: 12, md: 4 }}>
                            <Stack spacing={1}>
                                <Typography variant="body2" sx={{ fontWeight: 600, fontSize: '0.875rem' }}>
                                    年齢
                                </Typography>
                                <Stack direction="row" spacing={1} alignItems="center">
                                    <TextField
                                        size="small"
                                        placeholder="下限"
                                        value={ageFrom}
                                        onChange={(e) => setAgeFrom(e.target.value)}
                                        sx={{ flex: 1, '& .MuiOutlinedInput-root': { fontSize: '0.875rem' } }}
                                    />
                                    <Typography variant="body2" sx={{ fontSize: '0.875rem' }}>〜</Typography>
                                    <TextField
                                        size="small"
                                        placeholder="上限"
                                        value={ageTo}
                                        onChange={(e) => setAgeTo(e.target.value)}
                                        sx={{ flex: 1, '& .MuiOutlinedInput-root': { fontSize: '0.875rem' } }}
                                    />
                                    <Typography variant="body2" sx={{ fontSize: '0.875rem' }}>歳</Typography>
                                </Stack>
                            </Stack>
                        </Grid>
                        <Grid size={{ xs: 12, md: 4 }}>
                            <Stack spacing={1}>
                                <Typography variant="body2" sx={{ fontWeight: 600, fontSize: '0.875rem' }}>
                                    性別
                                </Typography>
                                <FormControl size="small" fullWidth>
                                    <Select value={gender} onChange={(e) => setGender(e.target.value)} displayEmpty sx={{ fontSize: '0.875rem' }}>
                                        <MenuItem value="">指定なし</MenuItem>
                                        <MenuItem value="male">男性</MenuItem>
                                        <MenuItem value="female">女性</MenuItem>
                                        <MenuItem value="other">その他</MenuItem>
                                    </Select>
                                </FormControl>
                            </Stack>
                        </Grid>
                        <Grid size={{ xs: 12, md: 4 }}>
                            <Stack spacing={1}>
                                <Typography variant="body2" sx={{ fontWeight: 600, fontSize: '0.875rem' }}>
                                    最寄駅
                                </Typography>
                                <TextField
                                    size="small"
                                    fullWidth
                                    placeholder="最寄駅を入力"
                                    value={nearestStation}
                                    onChange={(e) => setNearestStation(e.target.value)}
                                    sx={{ '& .MuiOutlinedInput-root': { fontSize: '0.875rem' } }}
                                />
                            </Stack>
                        </Grid>
                    </Grid>
                </Box>
            </Box>

            {/* 学歴・語学セクション */}
            <Box
                sx={{
                    bgcolor: 'background.paper',
                    border: '1px solid',
                    borderColor: 'divider',
                    borderRadius: 0.5,
                    overflow: 'hidden',
                    mb: 3,
                }}
            >
                <Box sx={{ bgcolor: 'rgba(5,67,165,0.1)', px: 1.5, py: 0.75, borderBottom: '1px solid', borderColor: 'divider' }}>
                    <Typography variant="subtitle2" sx={{ fontWeight: 600, color: 'text.primary', fontSize: '0.875rem' }}>
                        学歴・語学
                    </Typography>
                </Box>
                <Box sx={{ p: 2 }}>
                    <Grid container spacing={2}>
                        <Grid size={{ xs: 12, md: 6 }}>
                            <Stack spacing={1}>
                                <Typography variant="body2" sx={{ fontWeight: 600, fontSize: '0.875rem' }}>
                                    最終学歴
                                </Typography>
                                <FormControl size="small" fullWidth>
                                    <Select
                                        value={education}
                                        onChange={(e) => setEducation(e.target.value)}
                                        displayEmpty
                                        sx={{ fontSize: '0.875rem' }}
                                    >
                                        <MenuItem value="">指定なし</MenuItem>
                                        <MenuItem value="high_school">高校卒業</MenuItem>
                                        <MenuItem value="vocational">専門学校卒業</MenuItem>
                                        <MenuItem value="associate">短期大学卒業</MenuItem>
                                        <MenuItem value="bachelor">大学卒業</MenuItem>
                                        <MenuItem value="master">大学院修士課程修了</MenuItem>
                                        <MenuItem value="doctor">大学院博士課程修了</MenuItem>
                                    </Select>
                                </FormControl>
                            </Stack>
                        </Grid>
                        <Grid size={{ xs: 12, md: 6 }}>
                            <Stack spacing={1}>
                                <Typography variant="body2" sx={{ fontWeight: 600, fontSize: '0.875rem' }}>
                                    専攻
                                </Typography>
                                <TextField
                                    size="small"
                                    fullWidth
                                    placeholder="専攻を入力"
                                    value={major}
                                    onChange={(e) => setMajor(e.target.value)}
                                    sx={{ '& .MuiOutlinedInput-root': { fontSize: '0.875rem' } }}
                                />
                            </Stack>
                        </Grid>
                        <Grid size={{ xs: 12 }}>
                            <Stack spacing={1}>
                                <Typography variant="body2" sx={{ fontWeight: 600, fontSize: '0.875rem' }}>
                                    語学力
                                </Typography>
                                <FormControl size="small" fullWidth>
                                    <Select
                                        multiple
                                        value={languages}
                                        onChange={(e) => setLanguages(e.target.value as string[])}
                                        input={<OutlinedInput />}
                                        renderValue={(selected) => (
                                            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
                                                {selected.map((value) => (
                                                    <Chip key={value} label={value} size="small" />
                                                ))}
                                            </Box>
                                        )}
                                        sx={{ fontSize: '0.875rem' }}
                                    >
                                        <MenuItem value="日本語">日本語</MenuItem>
                                        <MenuItem value="英語">英語</MenuItem>
                                        <MenuItem value="中国語">中国語</MenuItem>
                                        <MenuItem value="韓国語">韓国語</MenuItem>
                                        <MenuItem value="スペイン語">スペイン語</MenuItem>
                                        <MenuItem value="フランス語">フランス語</MenuItem>
                                        <MenuItem value="ドイツ語">ドイツ語</MenuItem>
                                    </Select>
                                </FormControl>
                            </Stack>
                        </Grid>
                    </Grid>
                </Box>
            </Box>

            {/* 職務経歴セクション */}
            <Box
                sx={{
                    bgcolor: 'background.paper',
                    border: '1px solid',
                    borderColor: 'divider',
                    borderRadius: 0.5,
                    overflow: 'hidden',
                    mb: 3,
                }}
            >
                <Box sx={{ bgcolor: 'rgba(5,67,165,0.1)', px: 1.5, py: 0.75, borderBottom: '1px solid', borderColor: 'divider' }}>
                    <Typography variant="subtitle2" sx={{ fontWeight: 600, color: 'text.primary', fontSize: '0.875rem' }}>
                        職務経歴
                    </Typography>
                </Box>
                <Box sx={{ p: 2 }}>
                    <Grid container spacing={2}>
                        <Grid size={{ xs: 12, md: 6 }}>
                            <Stack spacing={1}>
                                <Typography variant="body2" sx={{ fontWeight: 600, fontSize: '0.875rem' }}>
                                    業界
                                </Typography>
                                <FormControl size="small" fullWidth>
                                    <Select
                                        value={industry}
                                        onChange={(e) => setIndustry(e.target.value)}
                                        displayEmpty
                                        sx={{ fontSize: '0.875rem' }}
                                    >
                                        <MenuItem value="">指定なし</MenuItem>
                                        <MenuItem value="it">IT・通信</MenuItem>
                                        <MenuItem value="finance">金融</MenuItem>
                                        <MenuItem value="manufacturing">製造業</MenuItem>
                                        <MenuItem value="retail">小売・流通</MenuItem>
                                        <MenuItem value="consulting">コンサルティング</MenuItem>
                                        <MenuItem value="medical">医療・福祉</MenuItem>
                                    </Select>
                                </FormControl>
                            </Stack>
                        </Grid>
                        <Grid size={{ xs: 12, md: 6 }}>
                            <Stack spacing={1}>
                                <Typography variant="body2" sx={{ fontWeight: 600, fontSize: '0.875rem' }}>
                                    職種
                                </Typography>
                                <FormControl size="small" fullWidth>
                                    <Select value={jobType} onChange={(e) => setJobType(e.target.value)} displayEmpty sx={{ fontSize: '0.875rem' }}>
                                        <MenuItem value="">指定なし</MenuItem>
                                        <MenuItem value="engineer">エンジニア</MenuItem>
                                        <MenuItem value="sales">営業</MenuItem>
                                        <MenuItem value="marketing">マーケティング</MenuItem>
                                        <MenuItem value="designer">デザイナー</MenuItem>
                                        <MenuItem value="consultant">コンサルタント</MenuItem>
                                        <MenuItem value="management">経営・管理</MenuItem>
                                    </Select>
                                </FormControl>
                            </Stack>
                        </Grid>
                        <Grid size={{ xs: 12, md: 4 }}>
                            <Stack spacing={1}>
                                <Typography variant="body2" sx={{ fontWeight: 600, fontSize: '0.875rem' }}>
                                    経験年数
                                </Typography>
                                <FormControl size="small" fullWidth>
                                    <Select
                                        value={yearsOfExperience}
                                        onChange={(e) => setYearsOfExperience(e.target.value)}
                                        displayEmpty
                                        sx={{ fontSize: '0.875rem' }}
                                    >
                                        <MenuItem value="">指定なし</MenuItem>
                                        <MenuItem value="0-1">1年未満</MenuItem>
                                        <MenuItem value="1-3">1〜3年</MenuItem>
                                        <MenuItem value="3-5">3〜5年</MenuItem>
                                        <MenuItem value="5-10">5〜10年</MenuItem>
                                        <MenuItem value="10+">10年以上</MenuItem>
                                    </Select>
                                </FormControl>
                            </Stack>
                        </Grid>
                        <Grid size={{ xs: 12, md: 4 }}>
                            <Stack spacing={1}>
                                <Typography variant="body2" sx={{ fontWeight: 600, fontSize: '0.875rem' }}>
                                    現在年収
                                </Typography>
                                <TextField
                                    size="small"
                                    fullWidth
                                    placeholder="例：500"
                                    value={currentSalary}
                                    onChange={(e) => setCurrentSalary(e.target.value)}
                                    InputProps={{
                                        endAdornment: (
                                            <Typography variant="body2" sx={{ fontSize: '0.875rem' }}>
                                                万円
                                            </Typography>
                                        ),
                                    }}
                                    sx={{ '& .MuiOutlinedInput-root': { fontSize: '0.875rem' } }}
                                />
                            </Stack>
                        </Grid>
                        <Grid size={{ xs: 12, md: 4 }}>
                            <Stack spacing={1}>
                                <Typography variant="body2" sx={{ fontWeight: 600, fontSize: '0.875rem' }}>
                                    希望年収
                                </Typography>
                                <TextField
                                    size="small"
                                    fullWidth
                                    placeholder="例：600"
                                    value={desiredSalary}
                                    onChange={(e) => setDesiredSalary(e.target.value)}
                                    InputProps={{
                                        endAdornment: (
                                            <Typography variant="body2" sx={{ fontSize: '0.875rem' }}>
                                                万円
                                            </Typography>
                                        ),
                                    }}
                                    sx={{ '& .MuiOutlinedInput-root': { fontSize: '0.875rem' } }}
                                />
                            </Stack>
                        </Grid>
                    </Grid>
                </Box>
            </Box>

            {/* 希望条件セクション */}
            <Box
                sx={{
                    bgcolor: 'background.paper',
                    border: '1px solid',
                    borderColor: 'divider',
                    borderRadius: 0.5,
                    overflow: 'hidden',
                    mb: 3,
                }}
            >
                <Box sx={{ bgcolor: 'rgba(5,67,165,0.1)', px: 1.5, py: 0.75, borderBottom: '1px solid', borderColor: 'divider' }}>
                    <Typography variant="subtitle2" sx={{ fontWeight: 600, color: 'text.primary', fontSize: '0.875rem' }}>
                        希望条件
                    </Typography>
                </Box>
                <Box sx={{ p: 2 }}>
                    <Grid container spacing={2}>
                        <Grid size={{ xs: 12, md: 6 }}>
                            <Stack spacing={1}>
                                <Typography variant="body2" sx={{ fontWeight: 600, fontSize: '0.875rem' }}>
                                    希望職種
                                </Typography>
                                <FormControl size="small" fullWidth>
                                    <Select
                                        multiple
                                        value={desiredJobType}
                                        onChange={(e) => setDesiredJobType(e.target.value as string[])}
                                        input={<OutlinedInput />}
                                        renderValue={(selected) => (
                                            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
                                                {selected.map((value) => (
                                                    <Chip
                                                        key={value}
                                                        label={value}
                                                        size="small"
                                                        color="primary"
                                                        variant="outlined"
                                                    />
                                                ))}
                                            </Box>
                                        )}
                                        sx={{ fontSize: '0.875rem' }}
                                    >
                                        <MenuItem value="エンジニア">エンジニア</MenuItem>
                                        <MenuItem value="営業">営業</MenuItem>
                                        <MenuItem value="マーケティング">マーケティング</MenuItem>
                                        <MenuItem value="デザイナー">デザイナー</MenuItem>
                                        <MenuItem value="コンサルタント">コンサルタント</MenuItem>
                                    </Select>
                                </FormControl>
                            </Stack>
                        </Grid>
                        <Grid size={{ xs: 12, md: 6 }}>
                            <Stack spacing={1}>
                                <Typography variant="body2" sx={{ fontWeight: 600, fontSize: '0.875rem' }}>
                                    希望業界
                                </Typography>
                                <FormControl size="small" fullWidth>
                                    <Select
                                        multiple
                                        value={desiredIndustry}
                                        onChange={(e) => setDesiredIndustry(e.target.value as string[])}
                                        input={<OutlinedInput />}
                                        renderValue={(selected) => (
                                            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
                                                {selected.map((value) => (
                                                    <Chip
                                                        key={value}
                                                        label={value}
                                                        size="small"
                                                        color="primary"
                                                        variant="outlined"
                                                    />
                                                ))}
                                            </Box>
                                        )}
                                        sx={{ fontSize: '0.875rem' }}
                                    >
                                        <MenuItem value="IT・通信">IT・通信</MenuItem>
                                        <MenuItem value="金融">金融</MenuItem>
                                        <MenuItem value="製造業">製造業</MenuItem>
                                        <MenuItem value="小売・流通">小売・流通</MenuItem>
                                        <MenuItem value="コンサルティング">コンサルティング</MenuItem>
                                    </Select>
                                </FormControl>
                            </Stack>
                        </Grid>
                        <Grid size={{ xs: 12, md: 6 }}>
                            <Stack spacing={1}>
                                <Typography variant="body2" sx={{ fontWeight: 600, fontSize: '0.875rem' }}>
                                    希望勤務地
                                </Typography>
                                <FormControl size="small" fullWidth>
                                    <Select
                                        multiple
                                        value={desiredLocation}
                                        onChange={(e) => setDesiredLocation(e.target.value as string[])}
                                        input={<OutlinedInput />}
                                        renderValue={(selected) => (
                                            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
                                                {selected.map((value) => (
                                                    <Chip
                                                        key={value}
                                                        label={value}
                                                        size="small"
                                                        color="info"
                                                        variant="outlined"
                                                    />
                                                ))}
                                            </Box>
                                        )}
                                        sx={{ fontSize: '0.875rem' }}
                                    >
                                        <MenuItem value="東京">東京</MenuItem>
                                        <MenuItem value="大阪">大阪</MenuItem>
                                        <MenuItem value="名古屋">名古屋</MenuItem>
                                        <MenuItem value="福岡">福岡</MenuItem>
                                        <MenuItem value="札幌">札幌</MenuItem>
                                        <MenuItem value="リモート可">リモート可</MenuItem>
                                    </Select>
                                </FormControl>
                            </Stack>
                        </Grid>
                        <Grid size={{ xs: 12, md: 6 }}>
                            <Stack spacing={1}>
                                <Typography variant="body2" sx={{ fontWeight: 600, fontSize: '0.875rem' }}>
                                    働き方
                                </Typography>
                                <FormControl size="small" fullWidth>
                                    <Select
                                        multiple
                                        value={workStyle}
                                        onChange={(e) => setWorkStyle(e.target.value as string[])}
                                        input={<OutlinedInput />}
                                        renderValue={(selected) => (
                                            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
                                                {selected.map((value) => (
                                                    <Chip
                                                        key={value}
                                                        label={value}
                                                        size="small"
                                                        color="info"
                                                        variant="outlined"
                                                    />
                                                ))}
                                            </Box>
                                        )}
                                        sx={{ fontSize: '0.875rem' }}
                                    >
                                        <MenuItem value="正社員">正社員</MenuItem>
                                        <MenuItem value="契約社員">契約社員</MenuItem>
                                        <MenuItem value="派遣社員">派遣社員</MenuItem>
                                        <MenuItem value="業務委託">業務委託</MenuItem>
                                        <MenuItem value="フルリモート">フルリモート</MenuItem>
                                        <MenuItem value="フレックス">フレックス</MenuItem>
                                    </Select>
                                </FormControl>
                            </Stack>
                        </Grid>
                    </Grid>
                </Box>
            </Box>

            {/* スキル・資格セクション */}
            <Box
                sx={{
                    bgcolor: 'background.paper',
                    border: '1px solid',
                    borderColor: 'divider',
                    borderRadius: 0.5,
                    overflow: 'hidden',
                    mb: 3,
                }}
            >
                <Box sx={{ bgcolor: 'rgba(5,67,165,0.1)', px: 1.5, py: 0.75, borderBottom: '1px solid', borderColor: 'divider' }}>
                    <Typography variant="subtitle2" sx={{ fontWeight: 600, color: 'text.primary', fontSize: '0.875rem' }}>
                        スキル・資格
                    </Typography>
                </Box>
                <Box sx={{ p: 2 }}>
                    <Grid container spacing={2}>
                        <Grid size={{ xs: 12, md: 6 }}>
                            <Stack spacing={1}>
                                <Typography variant="body2" sx={{ fontWeight: 600, fontSize: '0.875rem' }}>
                                    スキル
                                </Typography>
                                <FormControl size="small" fullWidth>
                                    <Select
                                        multiple
                                        value={skills}
                                        onChange={(e) => setSkills(e.target.value as string[])}
                                        input={<OutlinedInput />}
                                        renderValue={(selected) => (
                                            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
                                                {selected.map((value) => (
                                                    <Chip
                                                        key={value}
                                                        label={value}
                                                        size="small"
                                                        color="success"
                                                        variant="outlined"
                                                    />
                                                ))}
                                            </Box>
                                        )}
                                        sx={{ fontSize: '0.875rem' }}
                                    >
                                        <MenuItem value="JavaScript">JavaScript</MenuItem>
                                        <MenuItem value="TypeScript">TypeScript</MenuItem>
                                        <MenuItem value="React">React</MenuItem>
                                        <MenuItem value="Node.js">Node.js</MenuItem>
                                        <MenuItem value="Python">Python</MenuItem>
                                        <MenuItem value="Java">Java</MenuItem>
                                        <MenuItem value="SQL">SQL</MenuItem>
                                        <MenuItem value="AWS">AWS</MenuItem>
                                        <MenuItem value="Docker">Docker</MenuItem>
                                    </Select>
                                </FormControl>
                            </Stack>
                        </Grid>
                        <Grid size={{ xs: 12, md: 6 }}>
                            <Stack spacing={1}>
                                <Typography variant="body2" sx={{ fontWeight: 600, fontSize: '0.875rem' }}>
                                    資格
                                </Typography>
                                <FormControl size="small" fullWidth>
                                    <Select
                                        multiple
                                        value={certifications}
                                        onChange={(e) => setCertifications(e.target.value as string[])}
                                        input={<OutlinedInput />}
                                        renderValue={(selected) => (
                                            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
                                                {selected.map((value) => (
                                                    <Chip
                                                        key={value}
                                                        label={value}
                                                        size="small"
                                                        color="success"
                                                        variant="outlined"
                                                    />
                                                ))}
                                            </Box>
                                        )}
                                        sx={{ fontSize: '0.875rem' }}
                                    >
                                        <MenuItem value="情報処理安全確保支援士">情報処理安全確保支援士</MenuItem>
                                        <MenuItem value="基本情報技術者">基本情報技術者</MenuItem>
                                        <MenuItem value="応用情報技術者">応用情報技術者</MenuItem>
                                        <MenuItem value="TOEIC">TOEIC</MenuItem>
                                        <MenuItem value="PMP">PMP</MenuItem>
                                        <MenuItem value="AWS認定">AWS認定</MenuItem>
                                    </Select>
                                </FormControl>
                            </Stack>
                        </Grid>
                    </Grid>
                </Box>
            </Box>

            {/* ステータスセクション */}
            <Box
                sx={{
                    bgcolor: 'background.paper',
                    border: '1px solid',
                    borderColor: 'divider',
                    borderRadius: 0.5,
                    overflow: 'hidden',
                    mb: 3,
                }}
            >
                <Box sx={{ bgcolor: 'rgba(5,67,165,0.1)', px: 1.5, py: 0.75, borderBottom: '1px solid', borderColor: 'divider' }}>
                    <Typography variant="subtitle2" sx={{ fontWeight: 600, color: 'text.primary', fontSize: '0.875rem' }}>
                        ステータス
                    </Typography>
                </Box>
                <Box sx={{ p: 2 }}>
                    <Grid container spacing={2}>
                        <Grid size={{ xs: 12, md: 6 }}>
                            <Stack spacing={1}>
                                <Typography variant="body2" sx={{ fontWeight: 600, fontSize: '0.875rem' }}>
                                    登録日
                                </Typography>
                                <Stack direction="row" spacing={1} alignItems="center">
                                    <TextField
                                        size="small"
                                        type="date"
                                        value={registrationDateFrom}
                                        onChange={(e) => setRegistrationDateFrom(e.target.value)}
                                        sx={{ flex: 1, '& .MuiOutlinedInput-root': { fontSize: '0.875rem' } }}
                                    />
                                    <Typography variant="body2" sx={{ fontSize: '0.875rem' }}>〜</Typography>
                                    <TextField
                                        size="small"
                                        type="date"
                                        value={registrationDateTo}
                                        onChange={(e) => setRegistrationDateTo(e.target.value)}
                                        sx={{ flex: 1, '& .MuiOutlinedInput-root': { fontSize: '0.875rem' } }}
                                    />
                                </Stack>
                            </Stack>
                        </Grid>
                        <Grid size={{ xs: 12, md: 6 }}>
                            <Stack spacing={1}>
                                <Typography variant="body2" sx={{ fontWeight: 600, fontSize: '0.875rem' }}>
                                    転職状況
                                </Typography>
                                <FormControl size="small" fullWidth>
                                    <Select
                                        value={jobChangeStatus}
                                        onChange={(e) => setJobChangeStatus(e.target.value)}
                                        displayEmpty
                                        sx={{ fontSize: '0.875rem' }}
                                    >
                                        <MenuItem value="">指定なし</MenuItem>
                                        <MenuItem value="active">積極的に検討中</MenuItem>
                                        <MenuItem value="considering">検討中</MenuItem>
                                        <MenuItem value="not_looking">予定なし</MenuItem>
                                    </Select>
                                </FormControl>
                            </Stack>
                        </Grid>
                    </Grid>
                </Box>
            </Box>

            {/* 検索ボタン */}
            <Box
                sx={{
                    display: 'flex',
                    gap: 2,
                    justifyContent: 'center',
                    p: 3,
                    bgcolor: 'background.neutral',
                    borderRadius: 2,
                    border: '1px solid',
                    borderColor: 'divider',
                }}
            >
                <Button
                    variant="outlined"
                    color="inherit"
                    size="large"
                    onClick={handleReset}
                    startIcon={<Iconify icon="solar:restart-bold" />}
                    sx={{
                        minWidth: 180,
                        height: 48,
                        fontWeight: 600,
                    }}
                >
                    リセット
                </Button>
                <Button
                    variant="contained"
                    color="primary"
                    size="large"
                    onClick={handleSearch}
                    startIcon={<Iconify icon="eva:search-fill" />}
                    sx={{
                        minWidth: 180,
                        height: 48,
                        fontWeight: 600,
                    }}
                >
                    検索
                </Button>
            </Box>
        </DashboardContent>
    );
}
